<template>
	<view class="content">
		<view class="msg-list" @click="toEcharts">
			<view class="msg-item justify-start align-center inline-flex" @click.stop="copyIdFn(detailMsg.stationId)">
				设备ID: {{detailMsg.stationId||'暂无数据'}}
				<image class="copyIcon" src="@/static/app/copy2.png" mode=""></image>
			</view>
			<view class="msg-item">
				设备版本号: {{detailMsg.version||'暂无数据'}}
			</view>
			<view class="msg-item">
				设备创建时间: {{$util.timestampToTime(detailMsg.createTime)||'暂无数据'}}
			</view>
			<view class="msg-item">
				最新上报时间: {{$util.timestampToTime(detailMsg.monitorTime)||'暂无数据'}}
			</view>
			<view class="msg-item">
				当前设备是否存在 LED 显示屏: {{detailMsg.dotled==0?'存在':'不存在'}}
			</view>
			<view class="msg-item">
				4G信号模组: {{detailMsg.imei||'暂无数据'}}
			</view>
			<view class="msg-item">
				通道编号: {{detailMsg.volt||'暂无数据'}}
			</view>
		</view>
		<view class="now">
			<view class="title justify-between align-center">
				<view class="left justify-start align-center">
					<image class="leftTI" src="../../../static/index/leftTI.png" mode=""></image>
					实时数据
				</view>
				<view class="right">
					<image class="rightJT" src="/static/index/rightJT.png" mode=""></image>
				</view>
			</view>
			<view class="main flex-wrap justify-evenly">
				<view class="item justify-center align-center">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/online.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">设备在线状态</view>
						<view class="con"> {{detailMsg.isOnline==1?'在线':'离线'}}</view>
					</view>
				</view>
				<view class="item justify-center align-center">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/4g.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">4G 信号强度</view>
						<view class="con"> {{detailMsg.rssi||'暂无数据'}}</view>
					</view>
				</view>
				<view class="item justify-center align-center">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/lal1.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">设备所处经度</view>
						<view class="con"> {{detailMsg.latitude||'暂无数据'}}</view>
					</view>
				</view>
				<view class="item justify-center align-center ">
					<view class="logo">
						<image class="logoIcon" src="/subPages/static/app/appDetail/lal2.png" mode=""></image>
					</view>
					<view class="text flex-col justify-center align-center">
						<view class="top">设备所处纬度</view>
						<view class="con"> {{detailMsg.longitude||'暂无数据'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getEquipmentOne} from '@/api/index/equipment.js'

export default {
		data() {
			return {
				id:'',
				detailMsg: {}
			}
		},
		methods: {
			copyIdFn(id){
				let that = this;
				uni.setClipboardData({
					data:id,
					success() {
						that.$util.msg('复制成功')
					},
					fail() {
						that.$util.msg('复制失败，请重试')
					}
				})
			},
			async getEquipmentOneFn() {
				let res = await getEquipmentOne({
					id: this.id
				});
				this.detailMsg = res;
			},
			toEcharts() {
				uni.navigateTo({
					url: '/subPages/app/echarts/index?id='+this.detailMsg.stationId
				})
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getEquipmentOneFn();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: calc(100% - 2rem);
		margin: 0rem auto;
		padding-top: 1.5rem;
		font-size: 1.4rem;
		color: #333;

		.msg-list {
			color: #fff;
			padding: 2rem;
			border-radius: .8rem;
			background: linear-gradient(180deg, #74AA61, #51926D);

			.msg-item {
				padding-bottom: .5rem;
				.copyIcon{
					height: 1.5rem;
					width: 1.5rem;
					margin-left: 1rem;
				}
			}
		}

		.now {
			margin-top: 1.5rem;

			.title {
				.left {
					font-size: 1.5rem;
					font-weight: bold;

					.leftTI {
						width: .5rem;
						height: 1.5rem;
						margin-right: .75rem;
					}
				}

				.right {
					.rightJT {
						width: 1.2rem;
						height: 1.2rem;
					}
				}
			}

			.main {
				.item {
					width: 40%;
					height: 7.5rem;
					border-radius: .8rem;
					box-shadow: 0rem .2rem .4rem .1rem rgba(153, 153, 153, 0.16);
					margin-top: 1rem;

					.logo {
						margin-right: .8rem;

						.logoIcon {
							height: 3.8rem;
							width: 3.8rem;
						}
					}

					.top {
						font-size: 1.4rem;
						font-weight: 600;
					}

					.con {
						font-size: 1.2rem;
					}
				}
			}
		}

	}
</style>
